<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <style>
        #myCanvas {
            display: block;
            margin: 100px auto;
            /* background-color: red; */
            border: 1px solid lightpink;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="300" height="300">看到这段文字，说明你浏览器版本过低，不支持canvas标签，下载最新版浏览器浏览网页效果更佳</canvas>
    <script>
        let myCanvas = document.querySelector("#myCanvas"),
            ctx = myCanvas.getContext("2d"),
            drawHeight = myCanvas.height,
            drawWidth = myCanvas.width,
            [time] = [0];
        ctx.beginPath(); //每个部分的绘画起始（抬笔）
        ctx.lineWidth = 10; //画笔粗细
        ctx.strokeStyle = "#eaeaea"; //线段绘制颜色
        ctx.arc(drawHeight / 2, drawWidth / 2, 100, 0, 2 * Math.PI); //绘制圆形（x坐标，y坐标,半径，起始弧度，结束弧度，方向-true逆-false-顺）
        ctx.stroke(); //线段绘制颜色
        ctx.closePath();
        animate();

        function animate() {
            let start = -Math.PI / 2;
            let timer = setInterval(() => {
                let end = time * Math.PI / 50 + start;

                ctx.beginPath();
                ctx.lineWidth = 10;
                ctx.strokeStyle = "lightblue";
                ctx.arc(drawWidth / 2, drawHeight / 2, 100, start, end);
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.clearRect(drawWidth / 2 - 50, drawHeight / 2 - 50, 100, 100);
                ctx.textAlign = "center";
                ctx.font = "bold 32px '微软雅黑'";
                ctx.fillText(`${time}秒`, drawWidth / 2, drawHeight / 2 + 16);
                ctx.closePath();

                time++;
                time == 101 ? clearInterval(timer) : time;
            }, 100);
        }
    </script>

</body>

</html>